<template>
    <div class="service-detail">
        <div v-if="!showNullPage">
            <div class="breadcrumb">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>{{
                        service_info.name
                        }}</el-breadcrumb-item>
                    <el-breadcrumb-item>{{
                        serviceShopsInfo.name
                        }}</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="main-content flex">
                <div class="left-side">
                    <div class="main-top flex">
                        <div class="img1">
                            <el-carousel trigger="click" height="218px" :autoplay="false">
                                <el-carousel-item v-for="item in picList" :key="item">
                                    <img class="img1" :src="item" alt="" />
                                </el-carousel-item>
                            </el-carousel>
                        </div>
                        <div class="info">
                            <div class="title">
                                {{ serviceShopsInfo.name }}
                            </div>
                            <div class="price" v-if="
                                serviceShopsInfo && serviceShopsInfo.price
                            ">
                                <span>售价：</span> {{
                                    serviceShopsInfo.price == "0.00"
                                        ? "面议"
                                        : "￥" + serviceShopsInfo.price
                                }}
                            </div>
                            <div class="fz14">
                                成交
                                <span class="cff7">{{
                                    serviceShopsInfo.sale
                                    }}</span>
                                次
                            </div>
                            <div class="flex mt30 pointer bottons">
                                <div class="btn1" @click="goBuyService">
                                    购买服务
                                </div>
                                <!-- <div
                                    class="btn2 flex-center-align"
                                    @click="openKefu"
                                >
                                    <i
                                        class="el-icon-chat-dot-square mr10 fz16"
                                    ></i>
                                    <span>在线咨询</span>
                                </div> -->
                            </div>
                        </div>
                        <!-- <div class="like-icon pointer" @click="setCollect">
                            <img class="img2" :src="isCollect == 1 ? collectionS : collection" alt="" />
                            <span class="c999 fz16"> 收藏 </span>
                        </div> -->
                    </div>.
                    <div class="main-bottom">
                        <div class="top flex">
                            <div class="fw mr50" @click="navClick(index)" v-for="(item, index) in nav" :key="index"
                                :class="{ active: navSelect == index }">
                                {{ item }}
                            </div>
                        </div>
                        <div class="fw-page" v-show="navSelect == 0">
                            <div class="fw-info flex mt30">
                                <div class="tip-title c999">服务内容</div>
                                <div class="tip-text" v-html="serviceShopsInfo.service_content"></div>
                            </div>
                            <div class="fw-time flex mt30">
                                <div class="tip-title c999">服务时间</div>
                                <div class="tip-text">
                                    {{ serviceShopsInfo.service_time }}
                                </div>
                            </div>
                            <div class="zl-data flex mt30">
                                <div class="tip-title c999">资料准备</div>
                                <div class="tip-text" v-html="serviceShopsInfo.preparation"></div>
                            </div>
                            <div class="fw-process flex mt30">
                                <div class="tip-title c999">服务流程</div>
                                <div class="tip-text" v-html="serviceShopsInfo.service_process"></div>
                            </div>
                        </div>
                        <div v-show="navSelect == 1" class="rule">
                            <img src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/service/serviceshopsdetail_rule.png"
                                alt="">
                        </div>
                        <div class="tips">
                            <div class="tips_title">
                                <i class="el-icon-warning"></i>注意事项
                            </div>
                            <div class="tips_text">
                                <p>1、小竹企服作为第三方中介平台，依据交易合同（商品描述、交易前商定的内容）来保障交易的安全及买卖双方的权益；</p>
                                <p>2、非平台线上交易的项目，出现任何后果均与小竹企服无关；无论卖家以何理由要求线下交易的，请联系管理举报。</p>
                                <p>3、雇主在验收时需核对好需求完成情况，一旦点击完成后。平台打款后将无法协助雇主追回佣金。</p>
                                <p>4、如产生纠纷，但请尽量保留如聊天记录这样的重要信息，以防产生纠纷时便于平台客服快速处理。</p>
                            </div>
                        </div>


                        <div class="pj-page">
                            <div class="pj-page-title">
                                <img src="~/assets/images/service/serviceshopsdetail_jypj_icon.png" alt="">
                                交易评价（{{ pjList.length > 99 ? '99+' : pjList.length }}）
                            </div>
                            <div v-if="pjList.length > 0">
                                <div class="pj-list flex-between" v-for="(item, index) in pjList" :key="index">
                                    <div class="pj-info flex">
                                        <div class="pj-left mr30">
                                            <img class="avatar" :src="item.avatar" alt="" />
                                            <div class="name ellipsis1">
                                                {{ item.name }}
                                            </div>
                                        </div>
                                        <div class="pj-right">
                                            <el-rate :value="item.star" disabled text-color="#ff9900"
                                                :colors="['#FFC847', '#FFC847', '#FFC847']">
                                            </el-rate>
                                            <div style="max-width: 470px" class="text mt30">
                                                {{ item.evaluate }}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="time fz12 c999">
                                        {{ changeTime(item.createtime) }}
                                    </div>
                                </div>
                            </div>
                            <div v-else>
                                <el-empty description="暂无评论"></el-empty>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="right-side">
                    <div class="top pointer">
                        <div class="dianpu_info">
                            <div class="info1">
                                <img class="logo" :src="serviceInfo.logo" alt="" />
                                {{ serviceInfo.name }}
                            </div>
                            <div class="info2">
                                <span><i class="el-icon-location"></i>{{ serviceInfo.city }}
                                </span>
                                <img :src="getServiceType(serviceInfo.type)" alt="">
                            </div>
                        </div>
                        <div class="go_info" @click="goInfo">
                            进店铺
                        </div>
                        <div class="bzj">
                            商家已缴纳保证金<span>{{ serviceInfo.cash_deposit }}</span>元
                        </div>
                    </div>
                    <div class="bottom">
                        <!-- <div class="fz20">擅长服务</div>
                        <span class="service-items flex-wrap" v-for="(item, index) in goodServices" :key="index">
                            {{ item.name }}
                        </span> -->
                    </div>
                </div>
            </div>
        </div>
        <div class="null-page" v-else>
            <div class="main-content">
                <img src="~/assets/images/service/null-page.png" alt="" />
                <div class="title fz24 c333">
                    很抱歉，您查看的宝贝不存在，可能已下架或者被删除。
                </div>
                <div class="text fz16 c666">
                    您可以: <br />
                    1. 该宝贝可能已经下架，您可以联系服务商。<br />
                    2. 在项部搜索框重新输入关键词搜索
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {
    getShopDetail,
    getServiceInfo,
    setCollect,
    buyShop,
} from "@/assets/api/service";
import { getanalysedata2 } from "@/assets/api/indexApi";
import { goTopSmooth } from "@/assets/utils/utils";

import { mapState } from "vuex";

import serviceType5 from "@/assets/images/service/index/serviceType1.png";
import serviceType6 from "@/assets/images/service/index/serviceType6.png";

import collectionS from "@/assets/images/regulations/collection_s.png";
import collection from "@/assets/images/regulations/collection.png";
export default {
    name: "serviceshopsdetail",
    head() {
        return {
            title: "商品详情-【小竹财税平台】",
            meta: [
                {
                    hid: "keywords",
                    name: "keywords",
                    content: "小竹财税,服务商,小竹企服,商品详情",
                },
            ],
        };
    },
    layout: "serverHome",
    data() {
        return {
            pjvalue: 5,
            navSelect: 0,
            nav: ["服务详情", "交易规则"],
            goodServices: [],
            serviceInfo: {},
            serviceShopsInfo: {},
            picList: [],
            collectionS: collectionS,
            collection: collection,
            pjList: [],
            id: "",
            serviceId: "",
            isCollect: 0,
            showNullPage: false, //是否显示商品被删除页面
            service_info: "",

            // 1：官方服务商 2：金牌服务商 3：银牌服务商 4：铜牌服务商 5：一般服务商
            getServiceType: function (type) {
                switch (type) {
                    case 1:
                        return serviceType5;
                    case 2:
                        return serviceType5;
                    case 3:
                        return serviceType5;
                    case 4:
                        return serviceType5;
                    case 5:
                        return serviceType5;
                    case 6:
                        return serviceType6;
                    default:
                        break;
                }
            },
        };
    },
    mounted() {
        this.$loads.show();
        goTopSmooth();
        this.id = this.$route.query.id;
        this.getShopDetail();
    },
    computed: {
        ...mapState("common", {
            zim: (state) => state.zim,
        }),
    },
    methods: {
        changeTime(val) {
            return this.$moment(val * 1000).format("YYYY-MM-DD HH:mm:ss");
        },

        // //获取服务商商品详情
        async getShopDetail() {
            let res = await getShopDetail({ id: this.id });
            this.$loads.hidden();
            if (res.code == 1) {
                if (res.data.info) {
                    this.serviceShopsInfo = res.data.info;
                } else {
                    this.serviceShopsInfo = {};
                }
                this.picList = res.data.info.pic.split(",");
                this.pjList = res.data.evaluate;
                this.isCollect = res.data.is_collect;
                this.serviceId = res.data.service_info.id;
                this.service_info = res.data.service_info;
                this.getServiceInfo(res.data.service_info.id);
                getanalysedata2({
                    m_id: 9,
                    type: 1,
                    code: "PH1",
                    describe:
                        "服务商商品-" +
                        (res.data.info ? res.data.info.name : ""),
                });
            }
        },
        //获取服务商详情
        async getServiceInfo(id) {
            let res = await getServiceInfo({
                id: id,
            });
            if (res.code == 1) {
                this.goodServices = res.data.good_services;
                this.serviceInfo = res.data.info;
                if (res.data.info.is_del == 1 || res.data.info.status == 2) {
                    this.showNullPage = true;
                } else {
                    this.showNullPage = false;
                }
            } else {
                this.$message({
                    message: res.msg,
                    type: "warning",
                });
            }
        },
        //进入服务商详情
        goInfo() {
            this.$router.push({
                path: "/service/servicedetail",
                query: { id: this.serviceInfo.id },
            });
        },
        // go(item) {
        //   let data = this.$router.resolve({
        //     path: "/service/serviceshopsdetail",
        //     query: {
        //       id: item.id,
        //     },
        //   });
        //   window.open(data.href, "_blank"); //打开新的页面
        // },
        async goBuyService() {
            let res = await buyShop({ shop_id: this.id });
            if (res.code == 1) {
                this.$router.push({
                    path: "/service/shoporder",
                    query: { orderNo: res.data },
                });
            }
        },

        //导航切换
        navClick(index) {
            this.navSelect = index;
        },
        async setCollect() {
            var params = {
                id: this.id,
                type: 13,
            };
            let res = await setCollect(params);
            if (res.code == 1) {
                this.isCollect == 0
                    ? (this.isCollect = 1)
                    : (this.isCollect = 0);
                if (this.isCollect == 1) {
                    this.$message({
                        message: "收藏成功",
                        type: "success",
                    });
                } else {
                    this.$message({
                        message: "取消收藏",
                        type: "warning",
                    });
                }
            }
        },
        // 打开客服
        openKefu() {
            const token = window.localStorage.getItem('token')
            if (!token) {
                this.$confirm("该功能需要登录后使用", "提示", {
                    confirmButtonText: "去登录",
                    cancelButtonText: "再看看",
                })
                    .then(() => {
                        this.$router.push({
                            path: "/login",
                            query: {
                                url:
                                    window.location.pathname +
                                    window.location.search,
                            },
                        });
                    })
                    .catch(() => { });
                return;
            }
            localStorage.setItem("to_zim_userid", this.serviceInfo.user_id);
            this.$router.push({
                path: "/service/servicechat",
            });
        },
    },
};
</script>

<style lang="scss" scoped>
@import url("@/assets/static/reset.css");

.service-detail {
    height: 100%;
    padding-bottom: 30px;
}

.breadcrumb {
    margin: 20px auto;
    width: 1200px;
}

.main-content {
    margin: 0 auto;
    width: 1200px;

    .left-side {
        width: 900px;

        .main-top {
            position: relative;
            height: 289px;
            padding: 40px;
            background-color: #fff;

            .img1 {
                margin-right: 40px;
                width: 218px;
                min-width: 218px;
                height: 218px;
                background: #D8D8D8;
                border-radius: 4px；
            }

            .info {
                width: 100%;

                .title {
                    font-weight: 500;
                    font-size: 24px;
                }

                .price {
                    margin: 20px 0 25px;
                    height: 42px;
                    line-height: 42px;
                    background: #F1F8FF;
                    padding-left: 16px;
                    font-size: 24px;
                    color: #FA5151;
                    width: 100%;

                    span {
                        font-size: 14px;
                        color: #020C17;
                        position: relative;
                        top: -3px;
                    }
                }

                .bottons {
                    justify-content: flex-end;
                }

                .btn1 {
                    margin-right: 25px;
                    font-size: 14px;
                    width: 127px;
                    height: 40px;
                    line-height: 40px;
                    text-align: center;
                    background: #FF6900;
                    border-radius: 2px;
                    color: #fff;

                    &:hover {
                        background: #ff8f1f;
                    }

                }

                .btn2 {
                    font-size: 14px;
                    width: 127px;
                    height: 40px;
                    border-radius: 2px;
                    border: 1px solid #FF6900;
                    color: #FF6900;
                }
            }


        }
    }
}

.like-icon {
    position: absolute;
    right: 38px;
    bottom: 46px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .img2 {
        width: 30px;
        height: 29px;
    }
}

.right-side {

    .top {
        margin-left: 18px;
        padding: 10px;
        width: 280px;
        background: #fff;

        .dianpu_info {
            background: #F7F8FA;
            border-radius: 10px;
            padding: 10px 10px 20px;

            .info1 {
                display: flex;
                align-items: center;
                font-weight: 600;
                font-size: 18px;
                color: #000B1A;

                img {
                    width: 60px;
                    height: 60px;
                    border-radius: 60px;
                    display: block;
                    margin-right: 9px;
                }
            }

            .info2 {

                padding-top: 10px;
                display: flex;
                align-items: center;

                span {
                    font-weight: 400;
                    font-size: 14px;
                    color: #000B1A;
                }

                i {
                    font-size: 15px;
                    margin-right: 3px;
                    color: #1C87F3;
                }

                img {
                    height: 27px;
                    margin-left: 18px;
                }
            }
        }

        .go_info {
            margin-top: 10px;
            width: 120px;
            height: 28px;
            line-height: 28px;
            text-align: center;
            background: #1C87F3;
            border-radius: 6px;
            font-size: 14px;
            color: #FFFFFF;
            cursor: pointer;
            margin: 10px auto 11px;

            &:hover {
                opacity: 0.85;
            }
        }

        .bzj {
            height: 42px;
            text-align: center;
            line-height: 42px;
            background: #F1F8FF;
            border-radius: 5px;
            font-size: 16px;
            color: #000B1A;

            span {
                font-size: 24px;
                color: #FA5151;
            }
        }
    }

    .bottom {
        margin-left: 18px;
        margin-top: 16px;
        padding: 20px 30px;
        width: 280px;
        min-height: 400px;
        background: #fff;


    }
}

.main-bottom {
    min-height: 550px;
    margin-top: 17px;

    .top {
        color: #9E9E9E;
        padding: 0 40px;
        height: 60px;
        line-height: 60px;
        border-bottom: 1px solid #E7E7E7;
        background-color: #fff;
        border-radius: 10px;

        .fw {
            cursor: pointer;
            font-weight: 600;
            font-size: 20px;
            color: #020C17;

        }

        .active {
            color: #1B8DFF;
        }

    }

    .fw-page {
        padding: 20px 33px;
        font-size: 16px;
        background-color: #fff;
        border-radius: 10px;


        .tip-title {
            width: 91px;
        }

        .tip-text {
            width: 685px;

        }

    }

    .rule {
        padding: 20px 33px;
        background-color: #fff;
        border-radius: 10px;

        img {
            width: 100%;
            height: auto;
        }
    }

    .tips {
        padding: 20px 28px;
        background: #FFFFFF;
        border-radius: 10px;
        margin-top: 20px;

        .tips_title {
            font-weight: 500;
            font-size: 20px;
            color: #020C17;
            padding-bottom: 16px;
            border-bottom: 1px solid #F0F0F0;

            i {
                font-size: 20px;
                color: #FA5151;
                padding-right: 10px;
            }
        }

        .tips_text {
            padding-top: 12px;
            font-weight: 400;
            font-size: 15px;
            color: #020C17;
            line-height: 29px;
        }
    }

    .pj-page {
        background: #FFFFFF;
        border-radius: 10px;
        margin-top: 20px;

        .pj-page-title {
            font-weight: 500;
            font-size: 20px;
            color: #1B8DFF;
            padding: 14px 20px 16px;
            border-bottom: 1px solid #F0F0F0;

            img {
                width: auto;
                height: 20px;
                position: relative;
                top: 3px;
            }
        }

        .pj-list {
            border-bottom: 1px solid #E7E7E7;
            padding: 30px 32px;
            width: 850px;
            margin: 0 auto;

            .pj-left {
                text-align: center;

                .avatar {
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                }

                .name {
                    width: 100px;
                    height: 20px;
                }
            }
        }

    }
}

.dot {
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: #999;
}

::v-deep .el-carousel__indicators--horizontal {
    display: flex;
}

.el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
}

// .el-carousel__item:nth-child(2n) {
//     background-color: #99a9bf;
// }

// .el-carousel__item:nth-child(2n + 1) {
//     background-color: #d3dce6;
// }
.null-page {
    margin: 0 auto;
    margin-top: 20px;
    padding-top: 125px;
    width: 1200px;
    min-height: 814px;
    background-color: #fff;

    .main-content {
        margin: 0 auto;
        width: 600px;
        height: 600px;

        img {
            display: block;
            margin: 0 auto;
            width: 104px;
            height: 104px;
        }

        .title {
            margin: 40px 0;
        }
    }
}
</style>./serviceshopsdetail.vue